<template>
  <MessageBox2 :page-size="pageSize" :current-page="currentPage" :total="total"
               :table-data="purchaseOrdersStore.purchaseOrders"
               :table-title-list="tableTitleList" :loading="loading" :table-title="tableTitle" :batch-mode="batchMode"
               @current-change="currentPageChange" @size-change="pageSizeChange" @selectionChange="updateSelectedRows">
    <template #title-btn>
      <el-button type="primary" @click="toggleBatchMode">
        {{ batchMode ? "取消批量操作" : "批量操作" }}
      </el-button>
      <el-button
          type="danger"
          :disabled="!selectedRows.length"
          @click="handleBatchDelete"
          v-if="batchMode"
      >
        批量删除
      </el-button>
    </template>

    <template v-slot:table-btn>
      <!--发货单状态-->
      <el-table-column label="进货单状态">
        <template #default="{row}">
          {{ row.purchaseOrderStatus === 0 ? '未完成' : '已完成' }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{row}">
          <!--确认到货按钮-->
          <el-button
              v-if="row.purchaseOrderStatus === 0"
              plain round
              type="primary"
              size="mini"
              @click="handleConfirmArrival(row.purchaseId)">
            确认到货
          </el-button>
        </template>
      </el-table-column>
    </template>
  </MessageBox2>
</template>

<script setup>
import {ref} from 'vue'
import MessageBox2 from "@/components/MessageBox2.vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {PurchaseOrdersStore} from "@/stores/modules/purchaseOrdersStore.js";
import {confirmPurchaseOrderService, getPurchaseOrderListService} from "@/api/PurchaseOrder.js";

const purchaseOrdersStore = PurchaseOrdersStore()


// 表格参数
const tableTitle = "进货单信息"
const tableTitleList = {
  purchaseId: '进货单编号',
  productId: '商品编号',
  quantityOrdered: '订购数量',
  orderDate: '订购日期',
  expectedDeliveryDate: '期望日期',
}
const loading = ref(false)
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)

//页面变化 + 条件变化
const getPurchaseOrdersPage = async (currentPage, pageSize) => {
  loading.value = true
  try {
    const res = await getPurchaseOrderListService(currentPage.value, pageSize.value)
    if (res.status === 200) {
      purchaseOrdersStore.setPurchaseOrders(res.data.data.records)
      total.value = res.data.data.total
    }
  } catch (e) {
    await ElMessageBox.alert('请求出错')
    console.log(e)
  } finally {
    loading.value = false
  }
}

// 查询函数
const search = () => {
  getPurchaseOrdersPage(currentPage, pageSize)
}

//子组件触发
const currentPageChange = (cP) => {
  currentPage.value = cP
  getPurchaseOrdersPage(currentPage, pageSize)
}
const pageSizeChange = (size) => {
  pageSize.value = size
  getPurchaseOrdersPage(currentPage, pageSize)
}


// 确认到货
const handleConfirmArrival = async (purchaseId) => {
  try {
    // 显示确认弹窗
    await ElMessageBox.confirm(
        '确定要确认到货吗？',
        '确认到货',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
    );

    // 如果点击确认，执行更新逻辑
    const response = await confirmPurchaseOrderService(purchaseId);
    if (response.status === 200) {
      ElMessage.success('确认到货成功');
      // 刷新数据
      await getPurchaseOrdersPage(currentPage, pageSize);
    } else {
      ElMessage.error(`确认到货失败：${response.message || '未知错误'}`);
    }
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('操作被取消');
    }
    console.error('确认到货出错:', error);
  }
}


// 初始化
console.log("初始化")
getPurchaseOrdersPage(currentPage, pageSize)
console.log("初始化结束")
</script>


<style scoped>

</style>